// component css goes here
.Headscreen {
    background: #ffffff;
    position: absolute;
    display: none;
    box-sizing: border-box;
    background: '#fff';
    border-radius: 4px;
    box-shadow: rgb(197, 197, 197) 0px 0px 16px 2px;
    padding: 5px;
    li {
        list-style: none;
        cursor: pointer;
        padding-left: 20px;
        position: relative;
    }
    li:after {
        content: " ";
        border: 2px solid #ffffff;
        display: block;
        width: 12px;
        position: absolute;
        height: 12px;
        top: 50%;
        border-radius: 2px;
        box-sizing: border-box;
        left: 5px;
        transform: translate(0, -50%);
        box-shadow: 0 0 0px 1px #9e9e9e;
    }
    li[checkbox=true]:after {
        background: #5fb4ff;
    }
    li:hover {
        background-color: #f3f3f3;
    }
    input {
        width: 100%;
        box-sizing: border-box;
        border: 1px solid #d3d3d3;
        border-radius: 3px;
    }
    .number-div {
        display: none;
        text-align: center;
    }
    number-div>span {
        width: 40px;
        display: inline-flex;
        height: 4px;
        border-top: 1px solid #000;
    }
    .input-number {
        width: 70px;
    }
    .date-div{
        display: none;
    }
    .date-top {
        font-size: 14px;
        display: flex;
        border-bottom: 1px solid #d3d3d3;
        margin: 5px 0;
    }
    .date-top>span {
        flex: 1;
        text-align: center;
        padding: 3px 0;
        cursor: pointer;
    }
    .date-top>span[checkbox=true] {
        border-bottom: 1px solid #f3f3f3;
    }
    .sorts{
        .sorts-span{
            padding-right: 20px;
            position: relative;
            cursor: pointer;
            margin-left: 5px;
        }
        .sorts-span:after{
            position: absolute;
            content: " ";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border:1px solid #C9C9C9;
            top: 6px;
            margin-left: 3px;
        }
        .sorts-span.act:after{
            background: #898CFF;
        }
    }
    ul {
        margin-top: 10px;
        max-height: 240px;
        overflow: auto;
    }
    button {
        background: #fff;
        border: 1px solid #49b6ff;
        padding: 2px 4px;
        border-radius: 3px;
        cursor: pointer;
    }
    .button-div {
        margin-top: 10px;
        .okButton{
            background: #6cb3ff;
            float: right;
            color: #fff;
        }
    }
}

button {
    padding: 4px 2px;
}